<template>
    <div>
        <a-form class="centered-form" :model="formState"  ref="formRef" @finish="onFinish"> 
            <a-form-item label="标识" name="code" :rules="[{ required: true, message: '请输入编码' }]">
                <a-input v-model:value="formState.code" />
            </a-form-item>
            <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入名称' }]">
                <a-input v-model:value="formState.name" />
            </a-form-item>
            <a-form-item label="类型" name="flow" :rules="[{ required: true, message: '请选择类型' }]">
                <a-select v-model:value="formState.flow" placeholder="请选择流程">
                    <a-select-option value="income">收入</a-select-option>
                    <a-select-option value="outcome">支出</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="图标" name="icon" :rules="[{ required: true, message: '请输入图标' }]">
                <a-textarea v-model:value="formState.icon" placeholder="请输入图标名称" :auto-size="{ minRows: 2, maxRows: 5 }" />
            </a-form-item>
            <a-form-item label="是否启用" name="is_active">
                <a-checkbox v-model:checked="formState.is_active">启用</a-checkbox>
            </a-form-item>
            <a-form-item label="排序" name="sort_order">
                <a-input-number v-model:value="formState.sort_order" />
            </a-form-item>
            <a-form-item>
                <div class="form-actions">
                    <a-button type="primary" html-type="submit">提交</a-button>
                   
                </div>
            </a-form-item>
        </a-form>
            
    </div>
</template>
<script setup>
    import { reactive } from 'vue';
    import { message } from 'ant-design-vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';
    import { 
    Form, 
    FormItem, 
    Input, 
    InputPassword, 
    Checkbox, 
    Button ,
    Select,
    SelectOption,
    Textarea,
    } from 'ant-design-vue';
    const router = useRouter();
    const ATextarea = Textarea;
    const ASelect = Select;
    const ASelectOption = SelectOption;
    const AForm = Form;
    const AFormItem = FormItem;
    const AInput = Input;
    const AInputPassword = InputPassword;
    const ACheckbox = Checkbox;
    const AButton = Button;
    const formState = reactive({
        code: '',
        name: '',
        flow: 'income', // 默认值为 'income'
        icon: '',
        is_active: true,
        sort_order: '',
    });
    const onFinish = async() => {
        console.log('formState', formState);
        try {
            const response = await axios.post('/admin/billtype/store', {
                name: formState.name,
                flow: formState.flow,
                icon: formState.icon,
                is_active: formState.is_active,
                sort_order: formState.sort_order,
                code: formState.code,
                token: localStorage.getItem('admin_token'),
            });
            if (response.data == 200||201) {
                message.success('账单类型添加成功');
                router.push('/billtype/list');
            } else {
                message.error('添加失败: ' + response.data.message);
            }
        } catch (error) {
            message.error('网络错误，请稍后再试');
        }
    };
</script>